<template>
  <div class="rightData">
    <!-- 发表图片的总数折线图 -->
    <div id="echartsOne"></div>
    <!-- 各类图片总的饼状图 -->
    <div id="echartsTwo"></div>
  </div>
</template>
 
<script>
import * as echarts from 'echarts'
export default {
  name: 'eachartsOne',
  data(){
    return{
      // 封面数量
      coverNum:0,
      // 动态相册
      dynamicNum:0,
      // 静态相册
      staticNum:0,
      // 七天内时间
      sevenDays:[],
      // 七天内数据
      sevenData:[0,0,0,0,0,0,0]
    }
  },
  methods:{
    // 发表图片的总数折线图
    chartOne(){
    // 获取容器
    let myChart = echarts.init(document.getElementById("echartsOne"))
    // 绘制图表
    myChart.setOption({
      title: { text: "当前博客相册总数" },
      tooltip: {},
      xAxis: {
        data: this.sevenDays,
      },
      yAxis: {},
      series: [
        {
          name: "相册总数",
          type: "line",
          data: this.sevenData,
        },
      ],
    })
    },
    // 各类图片总的饼状图
    chartTwo(){
      // 获取容器
      let myChart = echarts.init(document.getElementById("echartsTwo"))
      // 绘制图表
      myChart.setOption({
        title: {
        text: '当前博客相册种类表',
        left: 'center'
    },
    tooltip: {
        trigger: 'item'
    },
    legend: {
        orient: 'vertical',
        left: 'left',
    },
    series: [
        {
            name: '图片种类',
            type: 'pie',
            radius: '60%',
            data: [
                {value: this.coverNum, name: '封面图'},
                {value: this.dynamicNum, name: '动态图'},
                {value: this.staticNum, name: '静态图'}
            ],
            emphasis: {
                itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }
    ]
      })
    },
    // 获取七天内的时间
    getAlbumNum(){
      let time = Date.now()
      for(let i=6;i>=0;i--){
        this.sevenDays[i] = this.conversionDate(time)
        time = time - 86400000
      }
      // 图表一
      this.chartOne()
    },
     // 日期转化
    conversionDate(time1){
      let time = new Date(time1)
      let y = time.getFullYear()
      let month = time.getMonth()+1<10?"0"+( time.getMonth()+1): time.getMonth()+1
      let day = time.getDate()<10?"0"+time.getDate():time.getDate()
      let h = time.getHours()<10?"0"+time.getHours():time.getHours()
      let f = time.getMinutes()<10?"0"+time.getMinutes():time.getMinutes()
      let s = time.getSeconds()<10?"0"+time.getSeconds():time.getSeconds()
      return `${month}-${day}`
      
    },
     // 获取七天内数据
    async getEventData(){
      let {data} = await this.$axios.get("/admin/album/publish/getCover")
      data.data.forEach(item=>{
        for(let i=0;i<7;i++){
           if(this.conversionDate(item.date) === this.sevenDays[i]){
             this.sevenData[i]++
           }
        }
      })
      for(let i=0;i<6;i++){
          this.sevenData[i+1] += this.sevenData[i]
        }
      // 调用图表
      this.chartOne()
    },
     // 获取各类封面数量
    async getNums(){
      // 获取静态
      let statics = await this.$axios.get("/admin/album/publish/getCover",{
       params:{
          type:"静态相册"
       }
      })
      this.staticNum = statics.data.data.length
      // 获取动态相册
      let dynamic = await this.$axios.get("/admin/album/publish/getCover",{
        params:{
          type:"动态相册"
        }
      })
      this.dynamicNum = dynamic.data.data.length
      // 获取封面相册
      let cover = await this.$axios.get("/admin/album/publish/getCover",{
        params:{
          type:"封面相册"
        }
      })
      this.coverNum = cover.data.data.length
      // 图表二
      this.chartTwo()
    },
  },
  mounted(){
    // 获取封面
    this.getNums()
    // 获取七天内时间
    this.getAlbumNum()
    // 获取七天内数据
    this.getEventData()
  }
}
</script>

<style scoped lang='less'>
.rightData{
    flex: 1;
    display: flex;
    flex-direction: column;
    #echartsOne{
      width: 100%;
      height: 300px;
      display: flex;
      justify-content: center;
    }
    #echartsTwo{
      width: 100%;
      height: 300px;  
      display: flex;
      justify-content: center;   
    }
  }
</style>